<template>
<div>
  <van-tabs v-model="active" scrollspy sticky >
    <van-tab v-for="(item,index) in listData" :title="item.cat_name">
      <div>
        <div class="txtcenter" v-for="(ite,index) in item.children">
          <div class="title">{{ite.cat_name}}</div>
          <div class="imglist" v-for="(val,index) in ite.children" :key="val.cat_id" @click="getId(val.cat_id)">
            <img  v-lazy="val.cat_icon">
          </div>
        </div>
      </div>
    </van-tab>
  </van-tabs>
</div>
</template>

<script>
import request from "../api/request";
export default {
  name: "class",
  data(){
    return{
      listData:[],
      active: 0,
    }
  },
  created() {
    let list=JSON.parse(localStorage.getItem('classList'))
      if(list){
        this.listData=list;
        return
      }
      this.getclassList();
  },
  methods:{
    //获取分类id
    getId(id){
      this.$router.push({
        path:`/shoplist`,
        query:{
          id
        }
      })
    },
    getclassList(){
      request.get('/categories').then(res=>{
        console.log(res.data)
        let {message}=res.data
        this.listData=message
        localStorage.setItem('classList',JSON.stringify(message))
      })
    }
  }
}
</script>

<style scoped lang="less">
div{box-sizing: border-box}
.title{line-height:40px;height: 40px;border-top: 1px #cccccc solid}
.txtcenter{text-align: center;overflow: hidden}
.imglist{width:25%;height:100px;float:left;border:1px #fff solid;img{width:100%;vertical-align: center;height:100%}}
</style>